<template>
  <div
    class="theater-detail"
    v-title
    :data-title="$t('router.theaterDetailTitle')"
  >
    <Breadcrumb></Breadcrumb>
    <div class="main">
      <div class="content">
        <h1 v-text="playInfos.name"></h1>
        <div class="vPlayer">
          <!-- :islike="playInfos.isDelete" -->
          <videoplayer
            ref="myChild"
            v-if="mp4Url"
            :mp4Url="mp4Url"
            :mp4Pic="playInfos.imgMain"
            :isDpi="false"
          ></videoplayer>
          <div v-else></div>
        </div>
      </div>
    </div>
    <el-tabs class="box tab-content" v-model="activeName">
      <el-tab-pane
        :label="$t('main.programIntroduction')"
        name="first"
        class="first"
      >
        <p
          :class="isIntroduce ? '' : 'ellipsis-two'"
          v-html="playInfos.description"
          v-if="playInfos.description"
        ></p>
        <p v-else v-text="$t('public.noInformations')"></p>
        <div
          class="unfold"
          v-show="playInfos.description"
          @click="isIntroduce = !isIntroduce"
        >
          <i :class="isIntroduce ? 'el-icon-minus' : 'el-icon-plus'"></i>
          {{ isIntroduce ? $t("main.putAway") : $t("main.open") }}
        </div>
      </el-tab-pane>
      <el-tab-pane
        :label="$t('main.festivalInformation')"
        name="second"
        class="second"
      >
        <ul v-loading="fullscreenLoading" class="ul-list">
          <li>
            <span>{{ $t("main.performanceName") }}：</span>
            <p v-text="playInfos.name" v-if="playInfos.name"></p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.performanceType") }}：</span>
            <p v-text="playInfos.typeName" v-if="playInfos.typeName"></p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
          <li>
            <span>{{ $t("main.performanceTheater") }}：</span>
            <p v-text="playInfos.theatreName" v-if="playInfos.theatreName"></p>
            <p v-else v-text="$t('public.noInformation')"></p>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Breadcrumb from "@/components/common/Breadcrumb/Index";
import videoplayer from "@/components/common/videoPlayer/Index";
export default {
  data() {
    return {
      mp4Url: "",
      // http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
      //"https://juyuan.kuke.com/1625711809561/5bd3ad81f9442eb7042cb27ac2927e9b/mp4/video/700kbps/33468.700kb.part1.mp4",
      workIndex: 0, //作品名称active
      headIndex: -1, //标题名称active
      chapterIndex: -1, //章节名称cative
      activeName: "first",
      isIntroduce: false,
      playInfos: {},
      fullscreenLoading: false,
      quality: "700", //清晰度
      type: "",
      time: null,
    };
  },
  components: {
    Breadcrumb,
    videoplayer,
  },
  watch: {},
  created() {
    this.getLivePath();
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    //作品名称片段
    async getLivePath() {
      // 检测用户权限
      let allow;
      if (this.$store.getters.loginStatu) {
        let videoParams = {
          token: this.$store.getters.userInfo.token,
          moduleId: 591, // 视频模块id
          contentId: this.$route.params.id,
          reportFlag:1
        };
        allow = await this.$api.user.checkUserPermissions(videoParams);
      } else {
        let videoParams = {
          moduleId: 591, // 视频模块id
          contentId: this.$route.params.id,
          reportFlag:1
        };
        allow = await this.$api.user.checkUserPermissionsByIp(videoParams);
      }
      if (allow.code === 1000000) {
        let params = {
          videoId: this.$route.params.id,
          quality: this.quality,
        };
        let res = await this.$api.theater.getLivePath(params);
        this.mp4Url = res.source;
      } else if (allow.code === 1701101) {
        this.$notify({
          title: this.$t("public.warning"),
          message: this.$t("public.accountNotExist"),
          type: "warning",
          offset: 100,
        });
      } else if (allow.code === 1701102) {
        this.$notify({
          title: this.$t("public.warning"),
          message: this.$t("public.validityExpired"),
          type: "warning",
          offset: 100,
        });
      } else if (allow.code === 1701103) {
        this.$notify({
          title: this.$t("public.warning"),
          message: this.$t("public.organizationValidityExpires"),
          type: "warning",
          offset: 100,
        });
      } else if (allow.code === 1701104) {
        this.$notify({
          title: this.$t("public.warning"),
          message: this.$t("public.organizationTheaterExpired"),
          type: "warning",
          offset: 100,
        });
      }
    },
    //获取视频详情页数据
    async getDetail() {
      this.fullscreenLoading = true;
      try {
        let params = {
          videoId: this.$route.params.id,
        };
        let res = await this.$api.theater.getLiveDetail(params);
        if (res.code === 1000000) {
          this.playInfos = res.source ? res.source : {};
          this.fullscreenLoading = false;
        }
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.theater-detail {
  .main {
    width: 100%;
    height: 800px;
    background: #333333;
    position: absolute;
    left: 0;
    .content {
      width: 1200px;
      margin: 20px auto;
      > h1 {
        font-size: 22px;
        color: #fff;
        margin-bottom: 20px;
      }
    }
  }
  .tab-content {
    margin-top: 850px;
    .el-tabs__content {
      .el-tab-pane {
        margin-top: 8px;
        > ul {
          > li {
            display: flex;
            align-items: flex-start;
            margin-bottom: 16px;
            line-height: 26px;
            color: #000;
            > span {
              white-space: nowrap;
            }
            p {
              display: flex;
              flex-wrap: wrap;
              > span {
                margin-right: 18px;
              }
            }
          }
        }
        .unfold {
          color: #999999;
          font-size: 16px;
          margin-top: 8px;
          cursor: pointer;
        }
        // .elipsi-to {
        //   max-height: none
        //   line-height: none
        // }
      }
    }
  }
}
</style>
